<template>
	<div>
		<!-- 轮播 -->
		<van-swipe :autoplay="4000">
			<van-swipe-item v-for="item in carouselItems" :key="item.id">
				<img :src="APIDomainName + item.img" width="100%" />
			</van-swipe-item>
		</van-swipe>
		<!-- 宫格-首页快捷入口 -->
		<van-grid clickable :icon-size="60" :gutter="0" style="background-color: #FFFFFF;">
			<van-grid-item v-for="(item, i) of homeItems" :key="i" :icon="item.img" :text="item.title"
				:to="{ name: item.routeName }">
			</van-grid-item>
		</van-grid>

		<!-- 首页推荐 -->
		<div class="goods-block">
			<van-cell title="首页推荐" icon="gift-o"></van-cell>
			
			<!-- <svg-icon iconName="notify" style="color: #07C160;"></svg-icon> -->
			
			<van-row type="flex" justify="center">
				<van-col span="7" class="goods_item" v-for="(item,i) in recommendedItems" :key="i"
					@click="onClick2GoodsDetail(item.product_id)">
					<van-image :src="APIDomainName + item.pic"></van-image>
					<div class="title-row">
						<div class="van-ellipsis">{{item.title}}</div>
						<div class="price">￥{{item.price}}</div>
					</div>
				</van-col>
			</van-row>
		</div>

		<!-- 最新上架 -->

		<!-- 热销单品 -->
	</div>
</template>

<script>
	import {
		getHomeData
	} from "@/api/home.js";

	export default {
		data() {
			return {
				carouselItems: [],
				recommendedItems: [],
				newArrialItems: [],
				topSaleItems: [],
				homeItems: [{
						title: "新闻资讯",
						routeName: "newsList",
						img: require("@/assets/images/menu1.png"),
					},
					{
						title: "图片分享",
						routeName: "working",
						img: require("@/assets/images/menu2.png"),
					},
					{
						title: "商品购买",
						routeName: "category",
						img: require("@/assets/images/menu3.png"),
					},
					{
						title: "留言反馈",
						routeName: "working",
						img: require("@/assets/images/menu4.png"),
					},
					{
						title: "视频专区",
						routeName: "working",
						img: require("@/assets/images/menu5.png"),
					},
					{
						title: "联系我们",
						routeName: "working",
						img: require("@/assets/images/menu6.png"),
					},
				],
			};
		},
		created() {
			this.init(); //初始获取页面需要的数据：轮播项数据
		},
		methods: {
			// 初始首页数据
			init() {
				getHomeData().then(result => {
					//console.log(result)
					this.carouselItems = result.data.carouselItems;
					this.recommendedItems = result.data.recommendedItems;
					this.newArrialItems = result.data.newArrialItems;
					this.topSaleItems = result.data.topSaleItems;
				}).catch(() => {});
			},

			//点击后跳转商品详情
			onClick2GoodsDetail(item_id) {
				let id = parseInt(item_id);
				this.$router.push({
					name: "goodsDetail",
					params: {
						id: id
					}
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.goods-block {
		background-color: #f7f7f7;

		.van-cell {
			font-size: 16px;
			background-color: #DCDEE0;
		}

		.goods_item {
			margin: 5px;
			padding: 5px;
			background-color: white;
			border-radius: 10px;
			font-size: 14px;

			.title-row {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 14px;
				.price {
					font-size: 18px;
					color: red;
					font-weight: bold;
					text-align: right;
					padding-right: 10px;
				}
			}
		}
	}
</style>
